﻿<!DOCTYPE html>
<html>
<head>
<!----------------------------------------------------------

  Copyright (c) 2015 Jean-Marc VIGLINO,
  released under CeCILL-B (french BSD like) licence: http://www.cecill.info/

------------------------------------------------------------>
  <title>ol-ext: Layerswitcher</title>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

  <meta name="description" content="An OL3 layerswitcher." />
  <meta name="keywords" content="ol3, layer, layerswitcher, control,jQuery" />
	<!-- FontAwesome -->
	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

  <!-- jQuery -->
  <script type="text/javascript" src="https://code.jquery.com/jquery-1.11.0.min.js"></script>

  <!-- Openlayers -->
  <link rel="stylesheet" href="https://openlayers.org/en/latest/css/ol.css" />
  <script type="text/javascript" src="https://openlayers.org/en/latest/build/ol.js"></script>
  <script src="https://cdn.polyfill.io/v2/polyfill.min.js?features=requestAnimationFrame,Element.prototype.classList,URL,Object.assign"></script>
  
  <!-- ol-ext -->
  <link rel="stylesheet" href="../../dist/ol-ext.css" />
  <script type="text/javascript" src="../../dist/ol-ext.js"></script>

  <link rel="stylesheet" href="../style.css" />
  <link rel="stylesheet" href="./map.switcher2.css" />

</head>
<body >
  <a href="https://github.com/Viglino/ol-ext" class="icss-github-corner"><i></i></a>

  <a href="../../index.html">
    <h1>ol-ext: LayerSwitcher control</h1>
  </a>
  <div class="info">
    <p>
      Example customizing the <i>ol/control/LayerSwitcher</i> with CSS.
    </p>
    <p>
      For more info see <a href='map.switcher.html'>ol/control/LayerSwitcher example</a>.
    </p>
  </div>

  <!-- Map div -->
  <div id="map" style="width:600px; height:400px;"></div>

  <div class="options"></div>

  <script type="text/javascript">

  // A group layer for base layers
  var baseLayers = new ol.layer.Group({
    title: 'Base Layers',
    openInLayerSwitcher: true,
    layers: [
      new ol.layer.Tile({
        title: "Watercolor",
        baseLayer: true,
        source: new ol.source.Stamen({
          layer: 'watercolor'
        })
      }),
      new ol.layer.Tile({
        title: "Toner",
        baseLayer: true,
        visible: false,
        source: new ol.source.Stamen({
          layer: 'toner'
        })
      }),
      new ol.layer.Tile({
        title: "OSM",
        baseLayer: true,
        source: new ol.source.OSM(),
        visible: false
      })
    ]
  });

  // An overlay that stay on top
  var labels = new ol.layer.Tile({
    title: "Labels (on top)",
    allwaysOnTop: true,			// Stay on top of layer switcher
    noSwitcherDelete: true,		// Prevent deleting from layer switcher
    source: new ol.source.Stamen({ layer: 'terrain-labels' })
  });
  // WMS with bbox
  var brgm = new ol.layer.Tile ({
    "title": "GEOLOGIE",
    "extent": [
      -653182.6969582437,
      5037463.842847037,
      1233297.5065495989,
      6646432.677299531
    ],
    "minResolution": 3.527777777777778,
    "maxResolution": 3527.777777777778,
    "source": new ol.source.TileWMS({
      "url": "https://geoservices.brgm.fr/geologie",
      "projection": "EPSG:3857",
      "params": {
        "LAYERS": "GEOLOGIE",
        "FORMAT": "image/png",
        "VERSION": "1.3.0"
      },
      "attributions": [
        "<a href='http://www.brgm.fr/'>&copy; Brgm</a>"
      ]
    })
  });

  // The Map
  var map = new ol.Map ({	target: 'map',
    view: new ol.View({
      zoom: 11,
      center: [260497, 6249720]
    }),
    controls: ol.control.defaults().extend ([
      // Add a new Layerswitcher to the map
      new ol.control.LayerSwitcher({
        oninfo: function(l){
          $('.options').html(l.get('title')+'<br/>');
          switch(l.get('title')) {
            case 'GEOLOGIE': 
              $('<img>').appendTo($('.options'))
                .attr('src', 'http://geoservices.brgm.fr/geologie?language=fre&version=1.3.0&service=WMS&request=GetLegendGraphic&sld_version=1.1.0&layer=GEOSERVICES_GEOLOGIE&format=image/png&STYLE=default');
              break;
            default: 
              break;
          }
        }
      })
    ]),
    layers: [ baseLayers, brgm, labels ]
  });

  </script>
  
</body>
</html>